<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
      xmlns:p="http://primefaces.org/ui"
      xmlns:h="http://xmlns.jcp.org/jsf/html">

    <body>

        <ui:composition template="./index.xhtml">

            <ui:define name="title">
                title
            </ui:define>

            <ui:define name="content">
                <div class="container-fluid">
                    <h:form>
                        <div class="row">
                            <div class="col-md-12">
                                <p:outputLabel value="#{postCommentBean.post.title}" styleClass="title-post" />
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-1">
                                <img class="img-border img-holder" width="60px" height="60px"
                                     src="#{utilBean.contextPath}/resources/#{postCommentBean.post.user.avatarPath}" alt=" " />
                            </div>
                            <div class="col-md-11">
                                <span class="title-introduce">Đã tạo ngày #{postCommentBean.post.createDate}, Lần sửa cuối: #{postCommentBean.post.updateDate}<br/>
                                    By </span><h:link class="userLink" value="#{postCommentBean.post.user.userName}" hreflang="#" />
                            </div>
                        </div>
                        <p class="separator"/>
                        <div class="row">
                            <div class="col-md-12">
                                <ul class="media-list">
                                    <li class="media">
                                        <div class="media-body">
                                            <h:outputText class="text text-justify" escape="false"
                                                          value="#{postCommentBean.post.content}" /><br/>
                                            <p:commandButton value="Like" actionListener="#"
                                                             update="votes">
                                                
                                            </p:commandButton>
                                            <p:outputLabel id="votes" value="9" />
                                            <p:commandButton value="Unlike" actionListener="#"
                                                             update="votes"/>
                                            <p class="separator text text-larger color-navy">
                                                #{postCommentBean.post.comments.size()} lượt bình luận</p>
                                            <ui:repeat value="#{postCommentBean.post.comments}" var="comment">
                                                <div class="media">
                                                    <a href="#" class="pull-left">
                                                        <img src="#{utilBean.contextPath}/resources/#{comment.user.avatarPath}" 
                                                             width="60px" height="60px" class="media-object" alt="Avatar" />
                                                    </a>
                                                    <div class="media-body">
                                                        <span class="media-heading">#{comment.user.userName}</span> - 
                                                        <span class="media-heading">#{comment.updateDate}</span>
                                                        <p class="text text-justify">#{comment.content}</p>
                                                    </div>
                                                </div>
                                            </ui:repeat>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </h:form>
                </div>
            </ui:define>

        </ui:composition>

    </body>
</html>
